<template>
  <div class="info-container">
    <div class="info-content">
      <div class="info-head">
        <div class="info-title">基础信息</div>
        <div class="info-tips">3.2.1</div>
        <div class="info-button">
          <!-- <el-button class="el-button" size="small" type="primary"> 手动更新 </el-button> -->
          <!-- <el-checkbox v-model="isRefresh">是否开启自动更新</el-checkbox> -->
        </div>
      </div>
      <div class="info-card">
        <div class="info-item" v-for="item in options" :key="item.prop">
          <div class="info-label">{{ item.name }}：</div>
          <!-- 标签 -->
          <div class="info-span info-progress" v-if="item.type === 'progress'">
            <div class="info-progress-icon">
              <a-progress :percent="getPercent(formData[item.prop], formData[item.total])" :show-info="false" />
            </div>
            <div class="info-progress-number">{{ formData[item.prop] }} / {{ formData[item.total] }}</div>
          </div>
          <!-- 标签 -->
          <div class="info-span info-tag" v-else-if="item.type === 'tag'">
            <a-tag :bordered="false" color="processing">{{ formData[item.prop] }}</a-tag>
          </div>
          <!-- 普通 -->
          <div class="info-span" v-else>{{ formData[item.prop] }}</div>
        </div>
      </div>
    </div>
    <div class="info-content">
      <div class="info-head">
        <div class="info-title">更多</div>
        <div class="info-button">
          <!-- <el-button class="el-button" size="small" type="primary"> 手动更新 </el-button> -->
          <!-- <el-checkbox v-model="isRefresh">是否开启自动更新</el-checkbox> -->
        </div>
      </div>
      <div class="info-card">
        <div class="info-item" v-for="item in moreOptions" :key="item.prop">
          <div class="info-label">{{ item.name }}：</div>
          <div class="info-span">{{ moreFormData[item.prop] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isRefresh: true,
        options: [
          {
            name: '主系统状态',
            prop: 'status',
            type: 'tag',
          },
          {
            name: '数采引擎运行状态',
            prop: 'yiqnin',
            type: 'tag',
          },
          {
            name: '数采引擎运行时长',
            prop: 'shichang',
          },
          {
            name: '数据处理引擎运行状态',
            prop: 'yiqnin',
            type: 'tag',
          },
          {
            name: '数据处理引擎运行时长',
            prop: 'shichang',
          },
          {
            name: '硬件标识',
            prop: 'biaoshi',
          },
          {
            name: '系统架构',
            prop: 'jiagou',
          },
          {
            name: '系统发行版',
            prop: 'faxing',
          },
          {
            name: '内核版本',
            prop: 'neihe',
          },
          {
            name: '系统Clib',
            prop: 'clib',
          },
          {
            name: '操作系统 CPU 负载',
            prop: 'fuzai',
          },
          {
            name: '操作系统内存使用',
            prop: 'shiyongqingkuang',
            total: 'shiyongqingkuangTotal',
            type: 'progress',
          },
        ],
        formData: {
          status: '运行中',
          yiqnin: '运行中',
          shichang: '7 小时 43 分钟 13秒',
          biaoshi: 'TzWdveQ5ifLvtL qsCWrVWx1JgZBh+19Zlpf2blmWrcs=',
          jiagou: 'x86_64',
          faxing: 'Ubuntu 20.04',
          neihe: '5.4.0-128-generic',
          clib: 'glibc-2.31',
          fuzai: '0.18/0.16/0.2',
          shiyongqingkuang: 3.77,
          shiyongqingkuangTotal: 7.64,
        },
        moreOptions: [
          {
            name: '日志推送状态',
            prop: 'logStatus',
          },
          {
            name: '监控推送状态',
            prop: 'jiankongStatus',
          },
          {
            name: '告警推送状态',
            prop: 'alarmStatus',
          },
        ],
        moreFormData: {
          logStatus: '停止',
          jiankongStatus: '停止',
          alarmStatus: '停止',
        },
      };
    },
    methods: {
      getPercent(data, total) {
        return Math.ceil((data / total) * 100);
      },
    },
  };
</script>

<style scoped>
  .info-container {
    padding: 15px;
    background-color: #fff;
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.03),
      0 1px 6px -1px rgba(0, 0, 0, 0.02),
      0 2px 4px 0 rgba(0, 0, 0, 0.02);
    border-radius: 8px;
  }
  .info-content {
    margin-bottom: 20px;
  }
  .info-head {
    display: flex;
    align-items: center;
  }
  .info-title {
    font-weight: 700;
    margin-right: 15px;
    font-size: 16px;
  }
  .info-tips {
    padding: 2px 15px;
    border-radius: 20px;
    background-color: #ddd;
    color: #666;
  }
  .info-button {
    margin-left: 50px;
  }
  .el-button {
    margin-right: 15px;
  }
  .info-card {
    max-width: 700px;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px #ddd;
    margin-top: 20px;
  }
  .info-item {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 170px 1fr;
    grid-column-gap: 10px;
    line-height: 30px;
  }
  .info-label {
    font-weight: 700;
    text-align: right;
  }
  .info-span {
    color: #999;
  }
  .info-progress {
    display: grid;
    grid-template-columns: 1fr 100px;
    justify-content: space-between;
  }
  .info-progress-number {
    text-align: center;
  }
</style>
